import React, { useEffect } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { Form, Input, Button, Card, Space, message } from 'antd'
import {
  reqAddHospitalSet,
  reqGetOneHospitalSet,
  reqUpdateHospitalSet,
} from '@api/hospitalSet'
import { IhospitalSet } from '@api/hospitalSet/model/hospitalSetTypes'
export default function AddOrUpdateHospitalSet() {
  // 创建form实例
  const [form] = Form.useForm()
  const navigate = useNavigate()

  // 获取路由参数传递过来的医院id
  const id = useParams().id as string

  // 由于添加和修改是同一个组件.所以在这里也需要写修改的逻辑
  // 当进入到修改组件时,需要根据当前医院的id获取医院数据
  useEffect(() => {
    // 发送请求获取当前医院数据
    ;(async function () {
      const result = await reqGetOneHospitalSet(id)
      // 将获取到的医院信息渲染到表单中
      // result==> {hosname:xxx, hoscode:yyyy}
      form.setFieldsValue(result)
    })()
  }, [])

  // 保存按钮的事件处理函数
  async function onFinish(values: IhospitalSet) {
    // 由于添加的保存和修改的保存是同一个按钮,所以这个函数中要判断是执行修改的代码,还是执行添加的代码(判断依据: 修改会传递id,添加不会传递id.有id就是修改)
    if (id) {
      // 修改
      // 发送请求
      // 注意: 添加数据时,无需给服务器上传id.但是修改数据时,必须要多传递一个id
      values.id = id
      await reqUpdateHospitalSet(values)
      // 提示用户
      message.success('修改医院成功')
      // 回到医院设置
    } else {
      // 添加医院设置的逻辑
      // 1.封装函数
      // 2.发送请求
      await reqAddHospitalSet(values)
      // 3.提示用户
      message.success('添加医院成功')
    }
    // 4.跳转到医院设置页面
    navigate('/syt/hospital/hospitalSet')
  }
  return (
    <Card>
      <Form
        form={form}
        wrapperCol={{ span: 22 }}
        labelCol={{ span: 2 }}
        onFinish={onFinish}
      >
        <Form.Item
          label="医院名称"
          name="hosname"
          rules={[{ required: true, message: '请填写信息' }]}
        >
          <Input placeholder="医院名称"></Input>
        </Form.Item>
        <Form.Item
          label="医院编码"
          name="hoscode"
          rules={[{ required: true, message: '请填写信息' }]}
        >
          <Input placeholder="医院编码"></Input>
        </Form.Item>
        <Form.Item
          label="api基础路径"
          name="apiUrl"
          rules={[{ required: true, message: '请填写信息' }]}
        >
          <Input placeholder="api基础路径"></Input>
        </Form.Item>

        <Form.Item
          label="联系人名称"
          name="contactsName"
          rules={[{ required: true, message: '请填写信息' }]}
        >
          <Input placeholder="联系人名称"></Input>
        </Form.Item>
        <Form.Item
          label="联系人手机"
          name="contactsPhone"
          rules={[
            { required: true, message: '请填写信息', pattern: /^1[3-9]\d{9}$/ },
          ]}
        >
          <Input placeholder="联系人手机"></Input>
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 2 }}>
          <Space>
            <Button type="primary" htmlType="submit">
              保存
            </Button>
            <Button
              onClick={() => {
                navigate(-1)
              }}
            >
              返回
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </Card>
  )
}
